<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/financial_affairs/transaction.css">
</head>
<body class="layui-layout-body">
<div id="transaction" class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo"><img src="../img/common/logo.jpg" alt=""></div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<h1>魔力公寓</h1>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item"> <a href="javascript:;">{{userinfo.loginName}}<img src="../img/common/icon07.gif" class="layui-nav-img"></a>
				<dl class="layui-nav-child">
					<dd><a href="../staff/modify_password.html"><img src="../img/common/icon08.png" alt=""><span>修改密码</span></a></dd>
					<dd><a href="../staff/bank_card.html"><img src="../img/common/icon09.png" alt=""><span>银行卡信息</span></a></dd>
					<dd><a href="javascript:;" @click.stop="doLogout"><img src="../img/common/icon10.png" alt=""><span>安全退出</span></a></dd>
				</dl>
			</li>
		</ul>
	</div>
	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll"> 
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree"  lay-filter="test">
				<li class="layui-nav-item"><a href="../survey/index.html"><img src="../img/common/icon01.png" alt="">概况</a></li>
				<li class="layui-nav-item"><a href="../rental/index.html"><img src="../img/common/icon02.png" alt="">租务</a></li>
				<li class="layui-nav-item on"><a href="../financial_affairs/index.html"><img src="../img/common/icon03.png" alt="">财务</a></li>
				<li class="layui-nav-item"><a href="../reports/index.html"><img src="../img/common/icon04.png" alt="">报表</a></li>
				<li class="layui-nav-item"><a href="../separate_accounts/index.html"><img src="../img/common/icon05.png" alt="">分账</a></li>
				<li class="layui-nav-item"><a href="../staff/index.html"><img src="../img/common/icon06.png" alt="">员工</a></li>
			</ul>
		</div>
	</div>
	<div class="layui-body"> 
		<!-- 内容主体区域 -->
		<div class="leftContent">
			<p class="layui-title">账务管理</p>
			<ul class="layui-menu">
				<li><a href="index.html">资金流水</a></li>
				<li><a href="transaction.html" class="on">交易明细</a></li>
				<li><a href="refundment.html">退款处理</a></li>
			</ul>
		</div>
		<div class="rightContent">
			<div class="section">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li class="layui-this">交易订单列表</li>
						<li>查询单个订单</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div class="layui-date">
								<input :class="status.startDateClassObj" @focus="changeStatus('startDateClassObj', 'isActive')" @blur="changeStatus('startDateClassObj', 'isFinish')" type="text" id="startDate" v-model="search.startDate">
								-
								<input :class="status.endDateClassObj" @focus="changeStatus('endDateClassObj', 'isActive')" @blur="changeStatus('endDateClassObj', 'isFinish')" type="text" id="endDate" v-model="search.endDate">
							</div>
							<table class="layui-table">
								<colgroup>
								<col width="8%">
								<col width="8%">
								<col width="9%">
								<col width="8%">
								<col width="9%">
								<col width="8%">
								<col width="9%">
								<col width="10%">
								<col width="10%">
								<col width="10%">
								<col width="9%">
								</colgroup>
								<thead>
									<tr>
										<th>订单号</th>
										<th>支付流水号</th>
										<th>订单时间</th>
										<th>订单状态</th>
										<th>小区-房间</th>
										<th>上游付款方</th>
										<th>费用类型</th>
										<th>支付费用（元）</th>
										<th>交易流水号</th>
										<th>收款方</th>
										<th>收款金额（元）</th>
									</tr>
								</thead>
								<tbody v-if="false">
									<tr>
										<td rowspan="7">34828101023</td>
										<td rowspan="7">789434888</td>
										<td rowspan="7">2018-02-22 11:23:45</td>
										<td rowspan="7">已退款</td>
										<td rowspan="7">魔力公寓1-101</td>
										<td rowspan="7">天乐</td>
										<td rowspan="2">房租</td>
										<td rowspan="2">1000.00</td>
										<td>34827501023</td>
										<td>房东A</td>
										<td><span class="money">742.50</span></td>
									</tr>
									<tr>
										<td>12330509049</td>
										<td>42号商城</td>
										<td><span class="money">247.50</span></td>
									</tr>
									<tr>
										<td>押金</td>
										<td>2000.00</td>
										<td>13950969899</td>
										<td>房东A</td>
										<td><span class="money">1980.00</span></td>
									</tr>
									<tr>
										<td rowspan="2">水费</td>
										<td rowspan="2">100.00</td>
										<td>12648759489</td>
										<td>42号商城</td>
										<td><span class="money">98.01</span></td>
									</tr>
									<tr>
										<td>12648759489</td>
										<td>智能水表</td>
										<td><span class="money">0.99</span></td>
									</tr>
									<tr>
										<td>电费</td>
										<td>100.00</td>
										<td>12648759489</td>
										<td>42号商城</td>
										<td><span class="money">99.00</span></td>
									</tr>
									<tr>
										<td>-</td>
										<td>-</td>
										<td>12648759489</td>
										<td>UBK</td>
										<td><span class="money">32.00</span></td>
									</tr>
								</tbody>
								<tbody v-if="getTable.length>0">
									<tr v-for="b in getTable">
										<td :rowspan="b.rowspan" :class="{hidden: b.billNoHidden}" v-text="b.billNo">34828101023</td>
										<td :rowspan="b.rowspan" :class="{hidden: b.payNoHidden}" v-text="b.payNo">789434888</td>
										<td :rowspan="b.rowspan" :class="{hidden: b.payTimeHidden}" v-text="b.payTime">2018-02-22 11:23:45</td>
										<td :rowspan="b.rowspan" :class="{hidden: b.billStatusHidden}"><span class="success" >{{b.billStatus}}</span></td>
										<td :rowspan="b.rowspan" :class="{hidden: b.houseHidden}" v-text="b.house">魔力公寓1-101</td>
										<td :rowspan="b.rowspan" :class="{hidden: b.buyerNameHidden}" v-text="b.buyerName">天乐</td>
										<td :rowspan="b.growspan" :class="{hidden: b.feeTypeHidden}" v-text="b.feeType">房租</td>
										<td :rowspan="b.growspan" :class="{hidden: b.payAmtHidden}" v-text="b.payAmt">1000.00</td>
										<td v-text="b.tranFlowNo">34827501023</td>
										<td v-text="b.payeeName">房东A</td>
										<td><span class="money" v-text="b.payeeAmt">1500.00</span></td>
									</tr>
								</tbody>
							</table>
							<div v-if="getTable.length>0" id="laypage"></div>
							<div v-else class="nothing-box">暂时没有数据</div>
						</div>
						<div class="layui-tab-item">
							<div class="layui-form">
								<div class="layui-inline">
									<select style="display: block" v-model="search2.type" name="order-number" lay-verify="required">
										<option value=1 selected>订单号</option>
										<option value=2 >支付流水号</option>
										<option value=3 >交易流水号</option>
									</select>
								</div>
								<div class="layui-inline">
									<input v-model="search2.number" type="text" name="key" required lay-verify="required" placeholder="请输入关键信息" autocomplete="off" class="layui-input">
								</div>
							</div>
							<table class="layui-table">
								<colgroup>
								<col width="8%">
								<col width="8%">
								<col width="9%">
								<col width="8%">
								<col width="9%">
								<col width="8%">
								<col width="9%">
								<col width="10%">
								<col width="10%">
								<col width="10%">
								<col width="9%">
								</colgroup>
								<thead>
									<tr>
										<th>订单号</th>
										<th>支付流水号</th>
										<th>订单时间</th>
										<th>订单状态</th>
										<th>小区-房间</th>
										<th>上游付款方</th>
										<th>费用类型</th>
										<th>支付费用（元）</th>
										<th>交易流水号</th>
										<th>收款方</th>
										<th>收款金额（元）</th>
									</tr>
								</thead>
								<tbody v-if="false">
									<tr>
										<td rowspan="7">34828101023</td>
										<td rowspan="7">789434888</td>
										<td rowspan="7">2018-02-22 11:23:45</td>
										<td rowspan="7">已退款</td>
										<td rowspan="7">魔力公寓1-101</td>
										<td rowspan="7">天乐</td>
										<td rowspan="2">房租</td>
										<td rowspan="2">1000.00</td>
										<td>34827501023</td>
										<td>房东A</td>
										<td><span class="money">742.50</span></td>
									</tr>
									<tr>
										<td>12330509049</td>
										<td>42号商城</td>
										<td><span class="money">247.50</span></td>
									</tr>
									<tr>
										<td>押金</td>
										<td>2000.00</td>
										<td>13950969899</td>
										<td>房东A</td>
										<td><span class="money">1980.00</span></td>
									</tr>
									<tr>
										<td rowspan="2">水费</td>
										<td rowspan="2">100.00</td>
										<td>12648759489</td>
										<td>42号商城</td>
										<td><span class="money">98.01</span></td>
									</tr>
									<tr>
										<td>12648759489</td>
										<td>智能水表</td>
										<td><span class="money">0.99</span></td>
									</tr>
									<tr>
										<td>电费</td>
										<td>100.00</td>
										<td>12648759489</td>
										<td>42号商城</td>
										<td><span class="money">99.00</span></td>
									</tr>
									<tr>
										<td>-</td>
										<td>-</td>
										<td>12648759489</td>
										<td>UBK</td>
										<td><span class="money">32.00</span></td>
									</tr>
								</tbody>
								<tbody v-if="getDetail.length>0">
								<tr v-for="b in getDetail">
									<td :rowspan="b.rowspan" :class="{hidden: b.billNoHidden}" v-text="b.billNo">34828101023</td>
									<td :rowspan="b.rowspan" :class="{hidden: b.payNoHidden}" v-text="b.payNo">789434888</td>
									<td :rowspan="b.rowspan" :class="{hidden: b.payTimeHidden}" v-text="b.payTime">2018-02-22 11:23:45</td>
									<td :rowspan="b.rowspan" :class="{hidden: b.billStatusHidden}"><span class="success" >{{b.billStatus}}</span></td>
									<td :rowspan="b.rowspan" :class="{hidden: b.houseHidden}" v-text="b.house">魔力公寓1-101</td>
									<td :rowspan="b.rowspan" :class="{hidden: b.buyerNameHidden}" v-text="b.buyerName">天乐</td>
									<td :rowspan="b.growspan" :class="{hidden: b.feeTypeHidden}" v-text="b.feeType">房租</td>
									<td :rowspan="b.growspan" :class="{hidden: b.payAmtHidden}" v-text="b.payAmt">1000.00</td>
									<td v-text="b.tranFlowNo">34827501023</td>
									<td v-text="b.payeeName">房东A</td>
									<td><span class="money" v-text="b.payeeAmt">1500.00</span></td>
								</tr>
								</tbody>
							</table>
							<div class="nothing-box">暂无数据</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/moment.min.js"></script>
<script src="../js/storejson2.min.js"></script>
<script src="../js/mock.js"></script>
<script src="../js/mockdata.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/financial_affairs/transaction.js"></script>
</body>
</html>